<template>
  <div id="root">
    <br>
    <div id="root-top">
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple logout-left">
            <el-input v-model.number="ruleForm.number" placeholder="输入1-100" style="display: inline-block"></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple logout-center ">
            <template>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </div>
        </el-col>

        <el-col :span="10">
          <div class="grid-content bg-purple-light logout-right">
            <el-button type="primary" @click="submit(ruleForm.number,value)">点击提交</el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light logout-right-right">
            <span>搜索到的日志数：{{counts}}</span>
          </div>
        </el-col>
      </el-row>


    </div>

    <!--显示的用户信息-->
    <div id="root-buttom">
      <template>
        <el-table
          :data="logData"
          height="360"
          border
          style="width: 100%"
          :row-style="tableRowClassName"
        >
          <el-table-column
            prop="level"
            label="告警等级"
            width="140">
          </el-table-column>
          <el-table-column
            prop="time"
            label="告警时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="module"
            label="告警位置"
            width="180">
          </el-table-column>
          <el-table-column
            prop="message"
            label="告警内容"
            width="580">
          </el-table-column>
        </el-table>
      </template>

    </div>
    <!--    分页器样式-->
    <div>
      <el-divider content-position="right"><span class="el-icon-warning"></span></el-divider>
    </div>
  </div>
</template>

<script>
  import router from '@/router'

  export default {
    name: 'LogDataView',
    data () {
      var checkNumber = (rule, value, callback) => {
        if (!value) {
          callback()
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'))
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'))
            } else {
              callback()
            }
          }
        }, 1000)
      }
      return {
        //获取到的日志信息存放到这里
        logData: [],
        ruleForm: [{
          number: ''
        }],
        counts: '',
        options: [
          {
            label: '最新日志',
            value: 1
          },
          {
            label: '最旧日志',
            value: 0
          }
        ],
        value: '',
        rules: {
          number: [
            {
              validator: checkNumber,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      get_data (number = 10, order_type = this.value) {
        this.$axios({
          url: this.$settings.base_url + `/user/logdata/?number=${number}&type=${order_type}`,
          method: 'get'
        }).then(res => {
          //获取日志信息保存到logData中，渲染显示出来
          this.logData = res.data.data
          //获取数据的行数
          this.counts = res.data.lenth
        })

      },
      submit (number, order_type) {
        if (Number.isInteger(number)) {
          let num = parseInt(number)
          if (num <= 100 && num >= 1) {
            this.$axios({
              url: this.$settings.base_url + `/user/logdata/?number=${number}&type=${order_type}`,
              method: 'get'
            }).then(res => {
              //获取日志信息保存到logData中，渲染显示出来
              this.logData = res.data.data
              //获取数据的行数
              this.counts = res.data.lenth
              if (res.data.code === 100) {
                this.$message.success(`获取数据成功:一共${this.counts}条数据`)
              } else {
                this.$message.error(`获取数据失败`)
              }
            })
          } else {
            this.$message.error('输入的数字不在搜索范围')
          }
        } else {
          this.$message.error('请输入数字！！')
        }
      },
        tableRowClassName({row, rowIndex}) {
        //拿到每行的数据row
         console.log(row)
          if(row.level==='WARNING'){
            return {
              color:'#925515'
            }
          }else {
            return {
                  color:'#f60808'
            }
          }
        }
    },
    mounted () {
      //一开始，选择的是最新日志
      this.value = 1
      //初始化时，获取最新10条报警日志信息
      this.get_data()

    }
  }
</script>

<style scoped>
  #root {
    text-align: left;
    padding: 20px;
  }

  #root-top {
    height: 100px;
    background-color: #fdfdfd;
    line-height: 100px;
  }

  #root-buttom {
    display: block;
    height: 360px;
  }

  .pagenation {
    text-align: center;
    font-size: 18px;
    margin-top: 10px;

  }

  .el-dialog {
    text-align: left;
    margin-right: 100px;
  }

  .logout-left {
    margin-right: 20px;
  }

  .logout-center {
    margin-right: 20px;
  }

  .logout-right-right {
    margin-left: 30px;
    color: #33c8dc;
    font-size: 18px;
  }

</style>

